<!-- 条文注 -->
<template>
  <p
    :class="className"
    :[dataNumber]="contentNumber"
    :data-type="blockData.dataType"
    :data-id="blockData.textData.dataId"
    :data-block-id="blockData.blockId"
    :data-share-id="shareId"
    :data-lang="language"
    :[dataRestart]="blockData.textData.isResetNumber ? '1' : null"
    :contenteditable="contenteditable"
  >
    <template v-for="(i, idx) of contentList">
      <template v-if="i.contentType === 'text' || i.contentType === undefined">{{ i.content }}</template>
      <sup v-else-if="i.contentType === 'sup'" :key="idx" data-type="sup">{{ i.content }}</sup>
      <sub v-else-if="i.contentType === 'sub'" :key="idx" data-type="sub">{{ i.content }}</sub>
    </template>
  </p>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  props: {
    dataId: { type: String, default: '' },
    contenteditable: { type: [String, Boolean], default: true },
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dataRestart: 'data-restart',
      dataNumber: 'data-number'
    }
  },
  computed: {
    className() {
      const { dataType = 'item_note' } = this.blockData
      const lang = this.language || 'zh'
      return dataType + ' ' + lang
    },
    dataType() {
      return this.blockData?.dataType || 'item_note'
    },
    contentList() {
      let contentList = cloneDeep(this.blockData.textData?.contentList || [])
      return contentList.splice(1) || []
    },
    contentNumber() {
      const noteAttr = this.blockData.textData?.contentList[0]
      return noteAttr.contentNumber || null
    },
    shareId() {
      const noteAttr = this.blockData.textData?.contentList[0]
      return noteAttr.shareId || ''
    },
    language() {
      const { dataLang = 'zh' } = this.blockData.textData
      return dataLang
    }
  }
}
</script>
<style></style>
